/* eslint-disable max-len */
import React, { useEffect } from 'react';
import './index.less';
import PropTypes from 'prop-types';
import { Permission } from '@choerodon/master';
import { Icon } from 'choerodon-ui';
import { Button } from 'choerodon-ui/pro';
import StatusTag from '../StatusTag';
import { timeConverts } from '@/utils/index';
import UserInfo from '@/components/userInfo/avatar';

const detailHeader = ({
  viewId,
  status,
  triggerRef,
  appServiceName,
  aHref,
  mainStore,
  appServiceId,
  projectId,
  appPipelineFlowModel,
  detailDevopsCdPipelineDeatilVO,
  openAuditModal,
  iamUserDTO,
  source,
  durationSeconds,
}) => {
  async function linkToGitlab() {
    try {
      await mainStore.checkLinkToGitlab(projectId, appServiceId);
      window.open(`${aHref}/commits/${triggerRef}`);
    } catch (e) {
      throw new Error(e);
    }
  }

  const handleOpenAuditModal = () => {
    openAuditModal && openAuditModal();
  };
  const maps = new Map([
    ['api', '手动触发'],
    ['web', '手动触发'],
    ['push', '提交触发'],
    ['schedules', '定时触发'],
    ['trigger', 'trigger触发'],
  ]);
  return (
    <div className="c7ncd-pipelineManage-optsDetail-header">
      <span>
        #
        {`${viewId}`}
      </span>
      {appServiceName && triggerRef && (
      <>
        <span>
          (
          {appPipelineFlowModel === 'simple' && (
          <>
            <Icon type="widgets_line" />
            <span>{appServiceName}</span>
            {' '}
            -
          </>
          )}

          <Icon type="branch" />
          <span
            role="none"
            onClick={linkToGitlab}
            className="c7ncd-pipelineManage-optsDetail-header-ref"
          >
            {triggerRef}
          </span>
          )
        </span>
      </>
      )}
      <div className="c7ncd-pipelineManage-optsDetail-header-info">
        <div className="c7ncd-pipelineManage-optsDetail-header-info-name">
          <UserInfo name={iamUserDTO?.realName} url={iamUserDTO?.imageUrl} email={iamUserDTO?.email} />
          <span className="c7ncd-pipelineManage-optsDetail-header-info-name-real">{iamUserDTO?.realName}</span>
        </div>
        <div className="c7ncd-pipelineManage-optsDetail-header-info-trigger">
          {maps.get(source) ? maps.get(source) : '其他触发'}
        </div>
        <div className="c7ncd-pipelineManage-optsDetail-header-info-time">
          <Icon type="timelapse" />
          <div className="c7ncd-pipelineManage-optsDetail-header-info-time-duration">
            {durationSeconds ? timeConverts(durationSeconds) : '-'}
          </div>
        </div>
      </div>
      <StatusTag status={status} size={12} />
      {appPipelineFlowModel === 'tree' && detailDevopsCdPipelineDeatilVO?.execute && (
        <Permission
          service={['choerodon.code.project.develop.ci-pipeline.ps.audit']}
        >
          <Button className="auditButton" icon="authorize" onClick={handleOpenAuditModal}>
            人工审核
          </Button>
        </Permission>
      )}
    </div>
  );
};

detailHeader.propTypes = {
  viewId: PropTypes.number.isRequired,
  status: PropTypes.string.isRequired,
};

export default detailHeader;
